<template>
    <view class="order-item">
        <view>
            <view class="order-item-top">
                <text class="order-desc-text">订单编号：{{ data.Sn }}</text>
                <text class="order-desc-text">下单时间：{{ data.AddTime }}</text>
            </view>
        </view>

        <view class="order-item-main" @click="goOrderDetail">
            <view class="order-item-imgs">
                <view class="img-item" v-for="item in data.DetailList">
                    <image mode="aspectFill" :src="easyGetImgUrl(item.ProductImage)" class="order-item-img"></image>
                    <view class="text-num"
                        ><text>x</text><text class="amountnum">{{ item.Amount }}</text></view
                    >
                </view>
                <!--         <view class="img-item">
                    <image mode="aspectFill" src="/static/img/communtiyGroup/icon_th.png" class="order-item-img"></image>
					<view class="text-num"><text>x</text><text class="amountnum">11</text><text>22</text></view>
				</view> -->
            </view>

            <view class="right">
                <view class="right-box">
                    <text class="right-box-text" v-if="data.DetailList.length > 4">···</text>
                    <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
                </view>
            </view>
        </view>

        <view style="padding: 20rpx 20rpx 0">
            <text class="order-desc"
                >共{{ getTotalNum() }}件，总计:<text style="color: #fa6400">￥{{ getTotalPrice() }}</text></text
            >
        </view>

        <view class="person-info">
            <view class="info">
                <view>提货人：{{ data.OrderContactName }}</view>
                <view>手机号：{{ data.OrderContactTel }}</view>
            </view>
            <view class="num"> 待提{{ data.ProductCount }}件 </view>
        </view>

        <view class="order-item-bottom">
            <view class="commission">
                <view>佣金</view>
                <view style="color: #fa6400">￥{{ data.Commission }}</view>
            </view>
            <view class="order-state-menu">
                <text class="btn btn-gray" @click="call">联系提货人</text>
                <text class="btn btn-success-hollow btn-success" v-if="data.State == 17" @click="affirm">确认提货</text>
            </view>
        </view>
        <view class="order-state">{{ data.State == 17 ? "待提货" : "已提货" }}</view>
        <uni-popup ref="popTip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确认提货?"
                :before-close="true"
                @close="cancelIt"
                @confirm="doIt"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import { OrderTakeComplete } from "@/service/api/communtiyGroup.js"
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {}
    },
    methods: {
        ...mapMutations(["UP_CART_VIEW", "UP_ORDER_VIEW"]),
        goOrderDetail() {
            this.easyGoTo("/pages_group/packet/order/task/order-detail?id=" + this.data.OrderId)
        },
        getTotalNum() {
            let num = 0
            this.data.DetailList.forEach((e) => {
                num += e.Amount
            })
            return num
        },
        getTotalPrice() {
            let price = this.data.PriceSum - this.data.PolicyDiscount - this.data.CouponMoney
            if (price < 0) {
                return 0.0
            } else {
                return price.toFixed(2)
            }
        },
        call() {
            uni.makePhoneCall({
                phoneNumber: this.data.OrderContactTel,
            })
        },
        affirm() {
            this.$refs.popTip.open()
        },
        //关闭弹窗
        cancelIt() {
            this.$refs.popTip.close()
        },
        doIt() {
            let param = {
                orderIds: this.data.OrderId,
            }
            OrderTakeComplete(param).then((res) => {
                if (res.State == 1) {
                    this.upOrderView()
                }
            })
            this.cancelIt()
        },
        upOrderView() {
            this.UP_ORDER_VIEW(new Date().getTime())
        },
    },
}
</script>

<style lang="scss">
@import "style/orderItem.scss";

.order-item {
    background: $color-white;
    border-radius: 10rpx;
    position: relative;
    margin: 20rpx $app-page-padding;
}
.item-head {
    display: flex;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 24rpx;
    justify-content: space-between;
    border-bottom: #ebebeb solid 1px;
    .date {
        font-size: 30rpx;
        font-weight: bold;
    }
    .state {
        font-size: 24rpx;
    }
}
.order-item-main {
    padding: $app-page-padding $app-page-padding 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: none;
    .info-list {
        .info-item {
            display: flex;
            padding: 0 0 20rpx 0;
            .name {
                width: 60px;
                font-size: 28rpx;
                color: $color-gray-3;
            }
            .val {
                font-size: 28rpx;
            }
        }
    }
}
.order-no {
    display: flex;
    padding: $app-page-padding;
    font-size: 28rpx;
    border-top: #ebebeb solid 1px;
    align-items: center;
    .info {
        flex: 1;
        .no {
            color: #007aff;
        }
    }
}
.order-state-menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .btn {
        margin-left: $app-page-padding;
    }
    .btn-success {
        color: #fff;
    }
}
.order-item-bottom {
    display: flex;
    justify-content: space-between;
    align-item: center;
    padding: 12rpx $app-page-padding $app-page-padding $app-page-padding;
    .commission {
        font-size: 24rpx;
    }
}

.person-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx;
    padding: 20rpx;
    font-size: 24rpx;
    background: #f8f8f8;
    border-radius: 8px;
    .num {
        font-size: 28rpx;
        font-weight: bold;
        color: #fa6400;
    }
}

.right {
    .right-box {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        .right-box-text {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding-right: 24rpx;
            font-family:
                PingFangSC-Medium,
                PingFang SC;
            font-weight: 500;
            letter-spacing: 2rpx;
        }
    }
    .order-desc {
        color: $app-color-text-tip;
    }
}
.pro-text {
    font-size: $font-size-28;
    font-weight: 600;
}
.text-num {
    display: flex;
    line-height: 40rpx;
    text {
        display: block;
        color: #fff;
    }
    .amountnum {
        height: 40rpx;
        line-height: 40rpx;
        color: #fff;
        max-width: 80rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
.flex-start-img {
    width: 36rpx;
    height: 40rpx;
}
</style>
